<template>
  <div class="app-container">
    <el-row :gutter="20" style="display: flex;">
      <el-col :span="6" :xs="24" style="">
        <user-card :user="user"/>
      </el-col>

      <el-col :span="18" :xs="24">
        <el-card>
          <el-tabs value="account">
            <el-tab-pane label="账号信息" name="account">
              <account :user="user"/>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import UserCard from './components/UserCard'
import Account from './components/Account'
import Request from "@/api/request";

export default {
  name: 'Profile',
  components: {UserCard, Account},
  data() {
    return {
      user: {},
    }
  },

  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      Request.get("/user/profile").then(res => {
        this.user = res
      })
    }
  }
}
</script>


<style scoped>

.app-container {

  overflow: hidden;
}
</style>
